<template>
    <div class="enterpriseManagedetail content-container">
        <div class="breadcrumb">审核管理-企业信息审核</div>
        <div class="mes ">
          <div class="flex-box flex-box-between">
            <div>
                <p>
                    {{companyInfo.fullName}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span>{{companyInfo.contactName}}&nbsp;{{companyInfo.phone}}</span>
                </p>
                <p>
                    <span>{{companyInfo.jobcount?companyInfo.jobcount+'个职位':''}}</span>
                    <span>{{companyInfo.natureId}}</span>
                    <span>发布时间：{{companyInfo.rdtime}}</span>
                </p>
            </div>
            <div class="c-type">
                <el-button :type="cType==1?'primary':''" @click="changeState(1)">试用合作</el-button>
                <el-button :type="cType==2?'primary':''" @click="changeState(2)">已合作</el-button>
                <el-button :type="cType==3?'primary':''" @click="changeState(3)">暂不合作</el-button>
                <el-button :type="cType==4?'primary':''" @click="changeState(4)">异常</el-button>
            </div>
          </div>
                <div v-if="companyInfo.checkState == 1"><span>试用期：{{companyInfo.tryCooperNum}}天 &nbsp;&nbsp;&nbsp;</span><span>使用剩余时间：{{companyInfo.tryCooperTimeDays?companyInfo.tryCooperTimeDays+'天':'1天'}}</span></div>
        </div>
     
        <div class="maincontain table">
            <div class="c-type btn-type">
                <el-row>
                    <el-col :span="14">
                        <el-radio-group v-model="btnType">
                            <el-radio-button label="0" >信息审核</el-radio-button>
                            <el-radio-button label="1">职位信息</el-radio-button>
                        </el-radio-group>
                    </el-col>
                    <el-col :span="10">
                        <el-form label-width="120px">
                            <el-form-item label="企业名称备注：">
                                <el-input type="text" v-model="comRemark" @blur="updateRemark"
                                          placeholder="例如：武汉某科技有限公司"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
            <div v-if="btnType==1" class="table-list">
                <div class="bigbox" v-if="!flag">
                    <div class="item" v-for="(item,index) in table.data" :key="index" @click="showDetails(item)">
                        <div class="one"  style="width: 510px;border:">
                            <span style="font-size:24px;margin-right:50px">{{item.name}}</span>
                            <span style="font-size:14px">{{item.salaryPerMonthLow}} - {{item.salaryPerMonthHigh}}W</span>
                            <span style="font-size:14px">/{{item.salaryCount}}年</span>
                            <p>{{item.city}} &nbsp;&nbsp; | &nbsp;&nbsp; {{item.workTime}} &nbsp;&nbsp; |&nbsp;&nbsp;
                                {{item.licenseTypeId}} &nbsp;&nbsp;| &nbsp;&nbsp; {{item.recruitingNumbers}}人</p>
                        </div>
                        <div class="two">发布时间：{{item.rdtime}}</div>
                        <div class="three" >
                            职位有效期：
                            <span style="color:#ff0000;width: 50px;display: inline-block;" >{{item.validity}}天</span>
                        </div>
                    </div>
                </div>
                <div class="pagination" v-if="!flag">
                    <el-pagination
                            background
                            @current-change="pageChange"
                            :current-page.sync="query.currPageNo"
                            :page-size="query.pageSize"
                            layout="total,prev, pager, next"
                            :total="table.total"></el-pagination>
                </div>

                <el-tabs
                        v-model="activeName"
                        type="card"
                        class="detail_tab"
                        v-if="flag">
                    <el-button @click="flag=false" type="primary" class="back">返回</el-button>
                    <el-tab-pane label="职位JD" name="first">
                        <div class="box m_t_10">
                            <div class="header">
                                <span class="vertical"></span>
                                <span>职位基本信息</span>
                            </div>
                            <ul class="body">
                                <li>
                                    <span class="title">职位名称：</span>
                                    <span>{{detailInfo.name}}</span>
                                </li>
                                <li>
                                    <span class="title">招聘人数：</span>
                                    <span>{{detailInfo.recruitingNumbers}}人</span>
                                </li>
                                <li>
                                    <span class="title">职位年薪：</span>
                                    <span v-if="detailInfo.tax == 0">税前&nbsp;</span>
                                    <span v-if="detailInfo.tax == 1">税后&nbsp;</span>
                                    <span>{{jobYear}}</span>
                                </li>
                                <li>
                                    <span class="title">工作地点：</span>
                                    <span>{{detailInfo.province?detailInfo.province:''}} - {{detailInfo.city?detailInfo.city:''}} - {{detailInfo.address?detailInfo.address:''}}</span>
                                </li>
                                <li>
                                    <span class="title">面试反馈时间：</span>
                                    <span>{{detailInfo.interFeedbackTimeIdStr}}</span>
                                </li>
                                <li>
                                    <span class="title">保证期：</span>
                                    <span>{{detailInfo.guaranteedPeriodIdStr}}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="box">
                            <div class="header">
                                <span class="vertical"></span>
                                <span>职位要求</span>
                            </div>
                            <ul class="body">
                                <li style="">
                                    <span class="title" style="">职位描述：</span>
                                    <span style="margin-left: 70px;display: block;" v-html="detailInfo.jobDesc"></span>
                                </li>
                                <li style="">
                                    <span class="title" >任职要求：</span>
                                    <span style="margin-left: 70px;display: block;" v-html="detailInfo.jobReq"></span>
                                </li>
                                <li>
                                    <span class="title">执业类型：</span>
                                    <span>{{detailInfo.licenseTypeIdStr}}</span>
                                </li>
                                <li>
                                    <span class="title">职位亮点：</span>
                                    <span class="label"
                                          v-for="(item,index) in detailInfo.jobSpot.split(',')"
                                          :key="index">{{item}}
									</span>
                                </li>
                            </ul>
                        </div>
                        <div class="box">
                            <div class="header">
                                <span class="vertical"></span>
                                <span>人员描述</span>
                            </div>
                            <ul class="body">
                                <li>
                                    <span class="title">工作年限：</span>
                                    <span>{{detailInfo.workTimeStr}}</span>
                                </li>
                                <li>
                                    <span class="title">学历要求：</span>
                                    <span>{{detailInfo.eduReqStr}}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="box">
                            <div class="header">
                                <span class="vertical"></span>
                                <span>有效期</span>
                            </div>
                            <ul class="body">
                                <li>
                                    <span class="title">职位有效期：</span>
                                    <span>{{detailInfo.validity}}天</span>
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="职位PA" name="second">
                        <div class="box m_t_10">
                            <div class="header">
                                <span class="vertical"></span>
                                <span>必须</span>
                            </div>
                            <ul class="body" v-for="(item,key) in talentNecessaryReq">
                                <li>
                                    <span class="title">{{key}}：</span>
                                    <span>{{item}}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="box">
                            <div class="header">
                                <span class="vertical"></span>
                                <span>优先</span>
                            </div>
                            <ul class="body" v-for="(item,key) in talentPriorityReq">
                                <li>
                                    <span class="title">{{key}}：</span>
                                    <span>{{item}}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="box">
                            <div class="header">
                                <span class="vertical"></span>
                                <span>其他</span>
                            </div>
                            <ul class="body">
                                <li style="">
                                    <span class="title">其他要求：</span>
                                    <span style="margin-left: 70px;display: block;" v-html="detailInfo.talentOtherReq"></span>
                                </li>
                            </ul>
                        </div>
                        <div class="box">
                            <div class="header">
                                <span class="vertical"></span>
                                <span>薪资福利</span>
                            </div>
                            <ul class="body">
                                <li>
                                    <span class="title">薪资构成：</span>
                                    <span>{{detailInfo.welfareSalary}}</span>
                                </li>
                                <li>
                                    <span class="title">社保福利：</span>
                                    <span>{{detailInfo.welfareSociety}}</span>
                                </li>
                                <li>
                                    <span class="title">假期福利：</span>
                                    <span>{{detailInfo.welfareVacation}}</span>
                                </li>
                                <li>
                                    <span class="title">交通福利：</span>
                                    <span>{{detailInfo.welfareTransport}}</span>
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div v-if="btnType==0">
                <div class="table">
                    <p>企业信息</p>
                    <el-table
                            border
                            :data="tableData1"
                            header-row-class-name="tab_header"
                            row-class-name="tab_row"
                            style="width: 100%">
                        <el-table-column align="center" prop="fullName" label="企业全称" width="350"></el-table-column>
                        <el-table-column align="center" prop="typeId" label="企业类型"></el-table-column>
                        <el-table-column align="center" prop="natureId" label="企业性质"></el-table-column>
                        <el-table-column align="center" prop="sizeId" label="企业规模"></el-table-column>
                        <el-table-column align="center" prop="city" label="所在地区"></el-table-column>
                    </el-table>
                    <el-table
                            border
                            :data="tableData1"
                            header-row-class-name="tab_header"
                            row-class-name="tab_row"
                            style="width: 100%">
                        <el-table-column align="center" prop="detailAddress" label="详细地址"></el-table-column>
                    </el-table>
                    <el-table
                            border
                            :data="tableData"
                            header-row-class-name="tab_header"
                            row-class-name="tab_row"
                            style="width: 100%">
                        <el-table-column align="center" label="营业执照" width="350">
                            <template slot-scope="scope">
                                <img width="300" :src="scope.row.businessLicense" alt>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" style="border: 2px solid red" prop="introduction" label="企业简介">
                            <template slot-scope="scope" >
                                <div style="display: flex;align-items: flex-start;" v-html="scope.row.introduction"></div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="table m_t_30">
                    <p>个人信息</p>
                    <el-table
                            border
                            :data="peopleData"
                            header-row-class-name="tab_header"
                            :cell-style="myCellStyle"
                            row-class-name="tab_row"
                            style="width: 100%;">
                        <el-table-column align="center" label="头像" width="80">
                            <template slot-scope="scope">
                                <img width="50" height="50" :src="scope.row.headImage" alt="">
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="contactName" label="姓名" width="150"></el-table-column>
                        <el-table-column align="center" prop="sex" label="性别" width="80">
                            <template slot-scope="scope">
                                {{scope.row.sex==0?'男':'女'}}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="phone" width="120" label="手机"></el-table-column>
                        <el-table-column align="center" prop="email" label="邮箱"></el-table-column>
                        <el-table-column align="center" prop="positions" label="职位"></el-table-column>
                        <el-table-column align="center" prop="officePhone" label="办公电话"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                comRemark: "",
                companyInfo: {},
                btnType: 0,
                query: {
                    checkState: 0,
                    currPageNo: 1,
                    pageSize: 10,
                },
                table: {
                    data: [],
                    total: 1,
                },
                flag: false,
                activeName: "first",
                companyId: undefined, //企业id
                currPageNo: "", //页数
                pageSize: "", //页数大小
                detailInfo: {},
                jobYear:"",
                cType: undefined,
                talentPriorityReq:{},
                talentNecessaryReq:{},
                staticData:[],
                index:{}
            };
        },
        computed: {
            tableData1() {
                let ret = []
                let info = {
                    fullName: this.companyInfo.fullName,
                    typeId: this.companyInfo.typeId,
                    natureId: this.companyInfo.natureId,
                    sizeId: this.companyInfo.sizeId,
                    city: (this.companyInfo.province?this.companyInfo.province:'') +' - '+ (this.companyInfo.city?this.companyInfo.city:''),
                    detailAddress:(this.companyInfo.province?this.companyInfo.province:'') +' - '+ (this.companyInfo.city?this.companyInfo.city:'') +
                    (this.companyInfo.detailAddress?this.companyInfo.detailAddress:'')
                }
                ret.push(info)
                return ret
            },
            tableData() {
                let ret = []
                let info = {
                    businessLicense: this.companyInfo.businessLicense,
                    introduction: this.companyInfo.introduction?this.companyInfo.introduction.replace(/\n/g, '<br>').replace(/ /g,"&nbsp; "):''
                }
                ret.push(info)
                return ret
            },
            peopleData() {
                let ret = []
                let info = {
                    headImage: this.companyInfo.headImage,
                    contactName: this.companyInfo.contactName,
                    sex: this.companyInfo.sex,
                    phone: this.companyInfo.phone,
                    email: this.companyInfo.email,
                    positions: this.companyInfo.positions,
                    officePhone: this.companyInfo.officePhone
                }
                ret.push(info)
                return ret
            }
        },
        created() {
            history.pushState(null, null, document.URL);
            var fun = (e)=>{
                history.pushState(null, null, document.URL);
                console.log("next",this.flag);
                if(this.flag){
                    this.flag = false;
                }else{
                    this.$router.push('/EnterpriseAudit');
                    window.removeEventListener("popstate",fun);
                }
            }
            window.addEventListener("popstate",fun, false);
            this._initData()
        },
        watch: {
            btnType(val) {
                this.flag = false
                if (val == 0) {}
                if (val == 1) {
                    if (this.table.data.length == 0) {
                        this._getCompanyInfo()
                    }
                }
            },
        },
        methods: {
            myCellStyle(e){
                return "display:table-cell; vertical-align: middle;";
                //console.log("e",e);
            },
            updateRemark() {
                console.log("remark", this.comRemark)
                console.log("comid", this.companyInfo);
                const params = {
                    companyId: this.companyInfo.id,
                    alias: this.comRemark
                };
                this.lAxios({
                    method: "post", //方法
                    url: "/platform/updateAlias.do",
                    params: params
                }).then(res => {
                    res = res.data;
                    if (res.status != 0) {
                        this.$message.error("保存失败")
                    }
                })
            },
            pageChange() {
                this._getCompanyInfo()
            },
            getStaticData(id) {
                for (let item of this.staticData) {
                    if (item.id == id) {
                        return item.content;
                        break;
                    }
                }
            },
            showDetails(item) {
                console.log(item.id)
                this._getJobInformation(item.id)
            },
            changeState(n) {
                if (n == this.cType) return
                if (n == 1) {
                    this.$prompt('试用期限(天)', '试用期设置', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^\d+$/,
                        inputErrorMessage: '只能输入数字'
                    }).then(({value}) => {
                        if(value==0){
                            console.log("dalog",value);
                            this.$message.error("试用期天数不能为0！")
                        }else{
                            let option = {
                                tryCooperTime: value,
                                checkState: n
                            }
                            this._upDateCompanyState(option)
                        }
                    }).catch(e => {
                    })
                } else {
                    this.$confirm('请认真审核，确认提交该企业信息, 是否继续?', '确认提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let option = {
                            checkState: n
                        }
                        this._upDateCompanyState(option)
                    }).catch(e => {
                    })
                }
            },
            _initData() {
                this.companyId = this.$route.params.id;
                this.index.checkState = this.$route.params.index;
                this.staticData = JSON.parse(localStorage.getItem("staticData"));
                //console.log("static",this.staticData)
                this._getData()
            },
            _upDateCompanyState(option) {
                const params = {
                    companyId: this.companyId,
                    ...option
                }
                this.lAxios({
                    method: "post",
                    url: "/platform/updateCompanyState.do",
                    params
                }).then(res => {
                    if (res.data.status == 0) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.$router.push({path:'/EnterpriseAudit',query:this.index})
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        })
                    }
                    //this._getData()
                });
            },
            _getData() {
                const params = {
                    companyId: this.companyId
                }
                this.lAxios({
                    method: "post",
                    url: "/platform/getCompanyInfor.do",
                    params
                }).then(res => {
                    console.log("res", res)
                    if (res.status == 200) {
                        this.companyInfo = res.data.data;
                        this.cType = this.companyInfo.checkState
                        if (this.companyInfo.hasOwnProperty("alias")) {
                            this.comRemark = this.companyInfo.alias;
                        }
                    }
                });
            },
            _getCompanyInfo() {
                const params = {
                    companyId: this.companyId,
                    currPageNo: this.query.currPageNo,
                    pageSize: this.query.pageSize
                }
                this.lAxios({
                    method: "post",
                    url: "/platform/getCompanyJobInfor.do",
                    params
                }).then(res => {
                    this.table.data = res.data.data.list
                    this.table.total = res.data.data.total
                });
            },
            _getJobInformation(jobId) {
                const params = {
                    jobId
                }
                this.lAxios({
                    method: "post",
                    url: "/platform/getJobInformation.do",
                    params
                }).then(res => {
                    this.flag = true
                    this.detailInfo = res.data.data;
                    this.detailInfo.jobDesc = this.$b.lineFeed(this.detailInfo.jobDesc,"<br>")
                    this.detailInfo.jobReq = this.$b.lineFeed(this.detailInfo.jobReq,"<br>")
                    this.detailInfo.talentOtherReq = this.$b.lineFeed(this.detailInfo.talentOtherReq,"<br>")
                    this.jobYear = this.detailInfo.salaryPerMonthLow +"w - "+ this.detailInfo.salaryPerMonthHigh+"w";
                    let tpr = JSON.parse(this.detailInfo.talentPriorityReq)
                    let tnr = JSON.parse(this.detailInfo.talentNecessaryReq);
                    for(let key in tpr){
                        tpr[key] = this.getStaticData(tpr[key]);
                    }
                    for(let key in tnr){
                        tnr[key] = this.getStaticData(tnr[key]);
                    }
                    this.talentPriorityReq = tpr;
                    this.talentNecessaryReq = tnr;
                    console.log("tpr",this.talentPriorityReq)
                    console.log("tnr",this.talentNecessaryReq)
                });
            }
        }
    };
</script>
<style lang="scss">
    .enterpriseManagedetail {
        // position: relative;
        padding-left: 10px;
        .breadcrumb {
            margin: 10px 0;
            font-size: 14px;
            color: #333;
        }
        .table {
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            .table-list {
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                background-color: #e8e8e8;
                padding: 10px;
                overflow-y: auto;
                .bigbox {
                    flex-grow: 1;
                    overflow-y: auto;
                    flex-shrink:0;
                    .item {
                        cursor: pointer;
                        display: flex;
                        background: #fff;
                        padding: 10px 20px;
                        margin: 10px;
                        line-height: 2;
                        align-items: center;
                        justify-content: space-between
                    }
                }
            }
            .btn-type {
                margin: 10px 0;
                .el-radio-button__orig-radio:checked+.el-radio-button__inner{
                    background:#3377ff ;
                }
                .el-radio-button__inner{
                    width: 125px;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background:#f7f9fc ;
                }
            }
        }
        .mes {
            background-color: #fff;
            padding: 20px;
            position: relative;
            flex-shrink: 0;
            p {
                font-size: 18px;
                font-weight: 600;
                line-height: 30px;
                span {
                    margin-right: 30px;
                    font-size: 14px;
                    font-family: "Arial Negreta", "Arial Normal", "Arial";
                    font-weight: 400;
                }
            }
            .c-type{
                .el-button{
                    width: 125px;
                    height: 50px;
                    margin-right: 15px;
                }
            }
            .abs1 {
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                font-size: 20px;
                color: #3377ff;
                border: 1px solid rgba(247, 249, 252, 0.7);
                border-radius: 5px;
                padding: 10px 30px;
                background-color: rgba(247, 249, 252, 0.9);
                margin-right: 370px;
            }
            .abs2 {
                width: 140px;
                box-sizing: border-box;
                position: absolute;
                top: 50%;
                right: 0;
                text-align: center;
                transform: translateY(-50%);
                font-size: 20px;
                color: #3377ff;
                border: 1px solid rgba(247, 249, 252, 0.7);
                border-radius: 5px;
                padding: 10px 30px;
                background-color: rgba(247, 249, 252, 0.9);
                margin-right: 210px;
            }
            .abs3 {
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                font-size: 20px;
                color: #3377ff;
                border: 1px solid rgba(247, 249, 252, 0.7);
                border-radius: 5px;
                padding: 10px 30px;
                background-color: rgba(247, 249, 252, 0.9);
                margin-right: 50px;
            }
        }
        .maincontain {
            margin-top: 10px;
            background-color: #fff;
            padding: 10px 50px;
            .btn {
                margin-bottom: 20px;
                display: flex;
                flex-direction: row;
                position: relative;
                .graybtn {
                    margin-right: 20px;
                    width: 160px;
                    height: 50px;
                    line-height: 50px;
                    font-size: 16px;
                    text-align: center;
                    border: 1px solid rgb(230, 233, 252);
                    border-radius: 5px;
                    background-color: rgb(247, 249, 252);
                    color: #1f2e4d;
                }
                .bluebtn {
                    background-color: #37f;
                    color: #fff;
                }
                .shuru {
                    height: 50px;
                    position: absolute;
                    right: 0;
                    line-height: 50px;
                    input {
                        height: 48px;
                        width: 350px;
                        border-radius: 5px;
                        padding-left: 20px;

                        border: 1px solid #d3dbeb;
                    }
                }
            }

            .detail_tab {
                position: relative;
                .back {
                    position: absolute;
                    right: 20px;
                    top: 20px;
                }
                .el-tabs__nav-scroll {
                    border-bottom: 3px solid #37f;
                }
                .el-tabs__nav {
                    border-bottom: none;
                }

                .el-tabs__item {
                    width: 100px;
                    height: 36px;
                    text-align: center;
                    font-size: 16px;
                    line-height: 36px;
                    color: rgb(31, 46, 77);
                    border-bottom: none;
                }
                .is-active {
                    background-color: #37f;
                    color: #fff;
                }
                .box {
                    padding: 30px 40px;
                    margin-top: 20px;
                    background-color: #f7f9fc;
                    .header {
                        margin-bottom: 15px;
                        .vertical {
                            display: inline-block;
                            margin-right: 10px;
                            width: 3px;
                            height: 14px;
                            background-color: #37f;
                            border: 1px solid rgb(211, 219, 235);
                            box-sizing: border-box;
                        }
                        span {
                            font-size: 16px;
                            font-weight: 700;
                        }
                    }
                    .body {
                        margin-left: 60px;
                        li {
                            margin-top: 10px;
                            span {
                                font-size: 14px;
                                color: #333;
                            }
                            .title {
                                /*border: 1px solid red;*/
                                color: #363636;
                                font-weight: 700;
                            }
                            .label {
                                display: inline-block;
                                margin-right: 20px;
                                padding: 5px 20px;
                                border: 1px solid #bcd2fd;
                                font-size: 13px;
                                color: #37f;
                                border-radius: 15px;
                                background-color: #e4edfc;
                            }
                        }
                    }
                }
                .m_t_10 {
                    margin-top: 10px;
                }
            }

            .table {
                p {
                    margin-bottom: 10px;
                    font-weight: 700;
                    font-size: 18px;
                    color: #1f2e4d;
                }

                .tab_header {
                    th {
                        color: #1f2e4d;
                        font-weight: 400;
                        font-size: 14px;
                        text-align: center;
                        background-color: #e6e9f0;
                    }

                    .tab_row {
                        td {
                            .cell {
                                color: #1f2e4d;
                            }
                        }
                    }
                }
            }

            .m_t_30 {
                margin-top: 30px;
            }
        }
    }

    .pagination {
        width: 100%;
        height: 30px;
        margin-top: 10px;
        margin-bottom: 10px;

        .pagin {
            float: right;
            clear: both;
        }
    }
</style>

